<template>
  <VirtualList :items="list" :size="40" :remain="8">
    <template v-slot="{ data, index }">
      <div
        :style="{
          height: '100%',
          backgroundColor: index % 2 === 0 ? 'red' : 'green',
        }"
      >
        {{ data.name }}
      </div>
    </template>
  </VirtualList>
</template>

<script>
import VirtualList from '../src/components/VirtualList.vue';
export default {
  components: {
    VirtualList
  },
  setup() {
    const items = [];
       for (let i = 0; i < 10000; i++) {
       items.push({ name: "我是第" + i + "个", id: i });
     }
    return {
       list: items
    }
  }
}
</script>
<style lang="less">
body {
  margin: 0;
}
</style>
